<template>
  <div v-if="total > size" class="myCenter">
    <ul class="page-content">
      <li class="page-item" v-if="current !== 1" @click="toPage(-1)">
        👈
      </li>
      <template v-if="current === 1">
        <li class="page-item"
            :style="{background: index === 1 ? color : '', color: index === 1 ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(index)">
          {{ index }}
        </li>
      </template>
      <template v-else-if="current === totalSize">
        <li class="page-item"
            :style="{background: index === realButtonSize ? color : '', color: index === realButtonSize ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(current - (realButtonSize - index))">
          {{ current - (realButtonSize - index) }}
        </li>
      </template>
      <template v-else>
        <li class="page-item"
            :style="{background: Math.ceil(realButtonSize/2) - index === 0 ? color : '', color: Math.ceil(realButtonSize/2) - index === 0 ? 'var(--white)' : ''}"
            v-for="index of realButtonSize"
            :key="index"
            @click="toPage(current - (Math.ceil(realButtonSize/2) - index))">
          {{ current - (Math.ceil(realButtonSize / 2) - index) }}
        </li>
      </template>
      <li class="page-item" v-if="current !== totalSize" @click="toPage(-2)">
        👉
      </li>
    </ul>
  </div>
</template>

<script setup>

import {onMounted, ref, watch} from "vue";
const emits = defineEmits(['toPage'])

const props = defineProps({
  current: {
    type: Number,
    default: 1
  },
  size: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  buttonSize: {
    type: Number,
    default: 3
  },
  color: {
    type: String,
    default: ""
  }
});

const totalSize = ref(0);
const realButtonSize = ref(0);


watch(() => props.total, (newValue, oldValue)=>{

  // totalSize.value = Math.ceil(this.total / this.size);
  realButtonSize.value = props.buttonSize < totalSize.value ? props.buttonSize : totalSize.value;

})

onMounted(() => {
  // totalSize.value = Math.ceil(this.total / this.size);
  realButtonSize.value = props.buttonSize < totalSize.value ? props.buttonSize : totalSize.value;
})
function toPage(flag) {
  if (flag === -1) {
    emits("toPage", props.current - 1);
  } else if (flag === -2) {
    emits("toPage", props.current + 1);
  } else {
    emits("toPage", flag);
  }
}

</script>

<style scoped>

.page-content {
  display: flex;
  padding: 0;
  margin: 30px 0;
}

.page-item {
  margin: 0 10px;
  list-style: none;
  border: 1px solid var(--lightGray);
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  color: var(--black);
  font-size: 14px;
  cursor: pointer;
}

.page-item:hover {
  border: 1px solid var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}
</style>
